<template>
  <div>
  <div class="comment" :style="indentCssC">
    <div class="comment_top">
    <p style="font-size:15px"> 回答者：{{ nickname }} ；   回答时间： {{ time }}     </p>
    <el-button class="btn" v-show="!show_comment"
               icon="el-icon-caret-bottom" size="mini"
               type="text"
               @click="show_comment=true"></el-button>
      <el-button class="btn" v-show="show_comment"
                 icon="el-icon-caret-top" size="mini"
                 type="text"
                 @click="show_comment=false"></el-button>
    </div>
    <div class="comment_detail" v-show="show_comment">
    <p >{{ content }}</p>
    <el-link @click="show_input=true" v-show="!show_input" class="input_change">回复</el-link>
    <el-link @click="show_input=false" v-show="show_input" class="input_change">收起</el-link>
    <div class="input" v-show="show_input">
      <el-input
          type="textarea"
          :rows="2"
          autosize
          placeholder="请输入回复"
          v-model="reply_content">
      </el-input>
      <el-input v-model="reply_nickname" style="width:20%" placeholder="请输入回复，默认为匿名"></el-input>
      <el-button type="primary" plain style="margin-top: 5px; margin-left: 30px" @click="reply">回复</el-button>
    </div>
    <el-divider v-show="true"></el-divider>

    <comment_data
        :id="item.id"
        :nickname="item.nickname"
        :content="item.content"
        :replyList="item.replyList"
        :time="item.time"
        :indent="item.indent"
        :parentId="item.id"
        v-for="(item,index)  in commentList">
    </comment_data>
    </div>
  </div>
  </div>

</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: "comment_data",
  props: {
    // 内容
    id: Number,
    indent: Number,
    parentId: Number,
    time: String,
    content: String,
    nickname: String,
    replyList: Array,

  },
  mounted() {
    //向后端请求数据,这里假装使用了axios
    /*axios({
      method: 'post',
      url: '/question/get_question_detail?id='+this.$route.query.problemIndex.toString(),
    })
        .then(res => {
          //获取数据
          if(res.data.errcode===0)
          {
            this.inputExample=[res.data.inputExample];
            console.log(res.data);
          }
          else if(res.data.errcode===-2)
          {
            Message.error("查询失败");
          }
          else {
            Message.error("未知错误");
          }
        })
        .catch(function (error) {
          this.$message.error(error);
        })*/
    this.load=false;
    //评论初始化
    for(let i=0;i<this.replyList.length;i++)
    {
      this.commentList.push(this.commentDataBase[this.replyList[i]]);
    }
    this.load=true;
  },
  computed:
      {
        commentDataBase()
        {
          return this.$store.state.commentDB;
        },
        listLen()
        {
          return this.$store.getters.listLen;
        },
        indentCssC: function () {
          if(this.indent===0)
          {
            return 'margin-top:0 px';

          }
          else {
            if(this.indent>8)
            {
              return 'margin-top:180 px';//嵌套样式上限
            }
            else {
              let t='margin-left:' + (this.indent * 20).toString()+ 'px';
              console.log(t)
              return t;
            }

          }

        }
      },
  data() {
    return {
      replyListChild:[],
      reply_content: '',
      reply_nickname: '',
      show_input: false,
      indentCss: this.indentCssC,
      commentData:[],
      newsTitle:'',
      commentList:[],
      load:true,
      show_comment:true,


    }
  }
  ,
  methods:
      {
        ...mapMutations([
          'pushComment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
        ]),
        reply() {
          let date = new Date();
          let dateString = date.getFullYear() + "/" +
              (date.getMonth() + 1) + "/" + date.getDate() +
              "  " + date.getHours() + ":" + date.getMinutes() +
              ":" + date.getSeconds();
          if (this.reply_nickname === '') {
            this.reply_nickname = '匿名';
          }
          /*axios.post{}*/
          //向后端传输数据，如果数据库写入成功，才进行下面的步骤,
          let commentUnit= {
            id:this.listLen,
            nickname: this.reply_nickname,
            content: this.reply_content,
            replyList: [],
            time: dateString,
            indent: this.indent+1,
            parentId: this.id,
          };
          this.pushComment(commentUnit);

          this.commentList.push(
              commentUnit
          );
          this.reply_content='';
          this.reply_nickname='';
          this.show_input=false;



        },

      },
}
</script>

<style scoped>
.comment {
  margin-top: 15px;
}
.btn{
  height:30px;
  width:30px;
  margin-left: 30px
}
.comment_top{
  display: flex ;
  height:15px;
  flex-direction:row;
  flex-wrap: nowrap;
  align-items:center;
}
.input
{
  margin-top: 20px;
}
.input_change :hover {
  border-bottom: #2c3e50;
  border-bottom-width: medium;
  color:blue;
}
</style>